import React, { useEffect, useState } from 'react'
import { Button, Divider } from 'antd';
import './detail.less'
import $axios from '../../../utils/axios';

///////////////////////////////////////
export default function Detail(props: any) {
    const { currentData, back, toEdit } = props
    //当前服务数据
    const [curData, setCurData] = useState<any>([])
    //对应的居民信息
    const [residentData, setResidentData] = useState<any>([])
    //服务信息
    const [serverData, setServerData] = useState<any>({})
    const [label, setLabel] = useState('')
    const getResidentInfo = () => {
        $axios({
            url: '/api/getAllBasicResidentBySearch',
            method: 'POST',
            data: {
                searchKey: currentData.rname
            }
        }).then(res => {
            console.log('居民信息', res.data);
            setResidentData(res.data[0])
        })
    }
    //获取服务信息
    const getServerInfo = () => {
        $axios({
            url: '/api/getServiceDetailById',
            method: 'POST',
            data: {
                id: currentData.id
            }
        }).then(res => {
            console.log('服务信息', res.data);
            setServerData(res.data)
            setLabel(changeLabelArr(res.data.resident.labelArr))
        })
    }
    //更新标签
    const changeLabelArr = (data: any) => {
        return data.map((item: any, index: number) => {
            return <span key={index}>
                {item.name}
            </span>
        })
    }
    // const onFinish = (values: any) => {
    //     console.log('Success:', values);
    //     message.success('驳回成功', 1)
    //     setIsModalOpen2(false);
    // };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    // const handleOk = () => {
    //     setIsModalOpen(false);
    //     message.success('审核通过', 1)
    // };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const showModal2 = () => {
        setIsModalOpen2(true);
    };
    const handleOk2 = () => {
        setIsModalOpen2(false);
    };
    const handleCancel2 = () => {
        setIsModalOpen2(false);
    };

    //获取年龄
    const getAge = (birthday: string | Date) => {
        return Math.floor((new Date().getTime() - new Date(birthday).getTime()) / 1000 / 60 / 60 / 24 / 365)
    }
    useEffect(() => {
        console.log(currentData);
        setCurData(currentData)
        getResidentInfo()
        getServerInfo()
    }, [])
    ////////////////////////////////////
    return (
        <div style={{ background: '#fff', padding: '20px' }}>
            <h3>服务详情</h3>
            <Divider />
            <h3>居民信息</h3>
            <div className='box'>
                <div>姓名:<span style={{ color: '#1677ff' }}>{residentData?.name}</span></div>
                <div>身份证号:<span>{residentData?.IDCard}</span></div>
                <div>性别:<span>{residentData?.gender ? '女' : '男'}</span></div>
                <div>年龄:<span>{getAge(residentData?.birthday).toString()}</span></div>
                <div>联系电话:<span>{residentData?.tel}</span></div>
                <div>现居地:<span>{residentData?.address}</span></div>
                <div>居民标签:{label}</div>
            </div>
            <Divider />
            <h3>服务信息</h3>
            <div className='box'>
                <div>服务编号:<span>{serverData?.number}</span></div><div>服务状态:<span>{serverData?.status == 0 ? '待审核' : serverData?.status == 1 ? '待服务' : serverData?.status == 2 ? '已完成' : serverData?.status == 3 ? '已驳回' : ''}</span></div>
                <div>服务机构:<span>{serverData?.other?.oname}</span></div><div>服务团队:<span>{serverData?.other?.tname}</span></div>
                <div>服务医生:<span>{serverData?.other?.dname}</span></div><div>服务包:<span>{serverData?.other?.sname}</span></div>
                <div>服务来源:<span>{serverData?.resident?.origin}</span></div><div>服务地点:<span>{!serverData?.address ? '家里' : '机构门诊'}</span></div>
                <div>预约时间:<span>{serverData?.appointmentTime}</span></div><div>提交时间:<span>{serverData?.submissionTime}</span></div>
                <div>服务备注:<span>{serverData?.notes}</span></div>
            </div>
            <Divider />
            {
              serverData.status<2 ? <div className='btnTips'>
                <Button type="primary">编辑服务信息</Button>
                <Button type="primary" style={{background:'#3dd4a7'}}>{serverData.status==0?'审核通过':serverData.status==1?'完成服务':''}</Button>
                <Button type="primary" style={{background:'#ff6b6b'}}>{serverData.status==0?'驳回':serverData.status==1?'取消预约':''}</Button>
                <Button onClick={back}>返回</Button>
              </div>
              :
              serverData.status>=2? <Button onClick={back}>返回</Button>
              : ''
            }
        </div>
    )
}
